<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        /*#header {
            text-align: center;
            background-color: #fff;
        }*/

        /*#header h1 {
            display: inline-block;
            color: #FFF;
            line-height: 48px;
            width: 100%;
            position: absolute;
            left: 0;
        }*/

    </style>
</head>

<body>
    <div id="wrap">
        <div id="header" class="user">
            <div class="header_content user">
                <a class="btn_middle" tapmode="tap-active">
                      User Info
                  </a>
            </div>
            <div class="header_content garbage">
                <a class="btn_middle">
                    Bin Management
                </a>
            </div>
            <div class="header_content carsystem">
                <a class="btn_middle">
                    Vehicle Management
                </a>
            </div>
        </div>
        <div id="main">

        </div>
        <div id="footer">
            <!-- 原生代替tabBar -->
            <ul id="footer_list">
                <li class="list_li home active" onclick="changeIndexFrame(0);" tapmode="tap-active">
                    <span class="text">Bins</span>
                </li>
                <li class="list_li follow" onclick="changeIndexFrame(1);" tapmode="tap-active">
                    <span class="text">Vehicles</span>
                </li>
                <li class="list_li fun" onclick="changeIndexFrame(2);" tapmode="tap-active">
                    <span class="text">User</span>
                </li>
                </li>
                <!-- <li class="list_bar">
                    <div class="list_bar_inner"></div>
                </li> -->
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>

<script type="text/javascript">
    // 下方tabBar，不好用放弃，用原生写
    var aFooterList = $api.domAll('#footer_list .list_li');
    var jumpToFun = function(index) {
            api.setFrameGroupIndex({
                name: 'fun',
                index: index,
                scroll: true
            });
        }
        //::::搜索框js加上宽度，来适应屏幕尺寸 end
        // tabBar切换状态，同时切换header与frame
    var frameJson = {
        '0': 'garbage',
        '1': 'carsystem',
        '2': 'user',
    };
    var changeIndexFrame = function(index) {
        header.className = frameJson[index];
        for (var i = 0; i < 3; i++) {
            if (i == index) {
                $api.addCls(aFooterList[index], 'active');
            } else {
                $api.removeCls(aFooterList[i], 'active');
            }
        };
        // listBar.style.webkitTransform = 'translateX('+index*100+'%)';
        openIndexFrames(index);
    };


    apiready = function() {
        // 阻止首页弹动
        api.setWinAttr({
            bounces: false
        });
        // 阻止首页弹动 end

        window.header = $api.byId('header');
        // $api.fixStatusBar(header);
        $api.fixIos7Bar(header);
        var headerPos = $api.offset(header);
        var main = $api.byId('main');
        var mainPos = $api.offset(main);
        var footer = $api.byId('footer');
        var footerPos = $api.offset(footer);

        // 切换frame
        // 打开app先设置funIndex为0；
        $api.setStorage('funIndex', 0);
        window.openIndexFrames = function(index) {
            var funIndex = $api.getStorage('funIndex');
            api.openFrame({
                name: frameJson[index],
                url: frameJson[index] + '.html',
                bounces: true,
                rect: {
                    x: 0,
                    y: headerPos.h,
                    w: 'auto',
                    h: mainPos.h
                }
            });
            for (var i = 0; i < 3; i++) {
                if (i == index) {
                } else {
                  api.setFrameAttr({
                    name: frameJson[i],
                    hidden: true
                  });
                }

            };
        };
        changeIndexFrame(0);
    };
</script>

</html>
